<template>
	
	<div class="main-div">
		<div class="header-div">
			<b>{{ titleEdit }}</b>
		</div>
		<div class="div-explain">
			<h4 style="font-size: 14px;font-weight: bold;margin: 15px 0 10px 0">操作说明</h4>
                <div style="margin: 0 0 20px 0">
                    <p class="twm_desc">1、下载
                        <a href="#" target="_blank"><u>EXcel格式模板</u> </a>
                        文件。
                    </p>
                    <p class="twm_desc">2、请注意格式要求，一个题型一个文件，多余的单元格可留空。</p>
                    <p class="twm_desc">
                        3、请确保EXCEL文件版本为2007~2010，并请勿删除（或新增）模板文件中的列，确保文件能顺利解析。</p>
                    <p class="twm_desc">4、请核对填写日期单元格，其属性为“文本”。</p>
                    <p class="twm_desc">5、默认全局自动去重后导入，如有需要，可在表单中设置忽略重复。</p>
                </div>

		</div>
		<div class="div-context">
		<div class="header-div">
			<b>批量导入</b>
		</div>
       <el-form 
	   		:model="form" 
	   		label-width="150px"
			class="form-demo" >
         <el-form-item>
			<template #label>
				<span class="custom-label">目标题库：</span>
			</template>
            <!-- <el-input v-model="form.question_bank"></el-input> -->
			<el-select
				v-model="form.question_bank"
				default-first-option
				
			>
				<el-option
				v-for="item in options.bank"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				/>
			</el-select>
         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">数据文件：</span>
			</template>
            <el-input v-model="form.file" placeholder="未选择任何文件">
			<template #prepend>
				<el-upload action="">
				  <el-button text  class="cc"> 选择文件</el-button>
				</el-upload>
			</template>
			</el-input>

         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">重复数据：</span>
			</template>
            <!-- <el-input v-model="form.status" type="textarea"></el-input> -->
			<el-select
				v-model="form.status"
				default-first-option
			>
				<el-option
				v-for="item in options.status"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				/>
			</el-select>
         </el-form-item>
		 <el-form-item>
			<el-button color="#1C84C6" @click="onSubmit">批量导入</el-button>
			<el-button @click="reSet" >重置</el-button>
			</el-form-item>
       	</el-form>
	</div>
    </div>
		<!-- </div> -->
	<!-- </div> -->
</template>

<script setup lang="ts">
import { ref, reactive ,toRefs,onMounted,watch} from 'vue';

const options=reactive({
	bank:[
		{
			value:'请选择目标题库',
			label:'请选择目标题库'
		},
		{
			value:'开发题',
			label:'开发题'
		},
		{
			value:'编程题',
			label:'编程题'
		},
		{
			value:'选择题',
			label:'选择题'
		}
	],//题库选项
	status:[
	{
			value:'自动去除重重复试题',
			label:'自动去除重重复试题'
		},
		{
			value:'忽略重复试题,全部导入',
			label:'忽略重复试题,全部导入'
		},
		
	]//重复数据状态
})

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    id:'',
	question_bank: '请选择目标题库',
    file:'',
    status:'自动去除重重复试题',
});

// 头部标题
let titleEdit = ref('批量导入试题')

//批量导入
const onSubmit = () => {
	
	//
};
//重置 
function reSet(){
	form.question_bank=''
	form.status=''
}

</script >
<style lang="less" scoped>
.el-form .el-input {
	width: 50%;
	
}
.el-form .el-textarea {
	width: 50%;
	
}
.el-form .el-select {
	width: 50%;
	
}

.custom-label{
	font-size: 14px;
  	font-weight: 900;
  	color: #666;
}
.header-div{
	background-color: #F5F5F5;
	color: #666666;
	margin: 0px 0px 10px;
	padding: 10px 10px; 
	font-size: 14px;
}
.main-div{
	border: 1px solid #f0f0f0;
 padding: 0px,15px,15px,15px;
}
.div-explain{
	margin-left: 10%;
	font-size: 13px;
	color: #676a6c;
}
.div-context{
	margin-left: 10%;
	width: 80%;
}
.twm_desc{
	font-size: 12px;
	line-height: 20px;
	margin: 0 0;
}
.cc{
	padding:15px 5px;
	text-align: center;
}
</style>